import { ExclamationCircleOutlined } from '@ant-design/icons';

import type { HomeStatistics } from '@/api/homeApi';

/**
 * 统计卡片项接口
 */
interface StatCardItem {
  /** 卡片标题 */
  title: string;
  /** 数值 */
  value: number | undefined;
  /** 图标名称 */
  iconName: string;
  /** 卡片样式类名 */
  cardClass: string;
  /** 是否显示双列数据 */
  isDouble?: boolean;
  /** 第二列标题（双列时使用） */
  secondTitle?: string;
  /** 第二列数值（双列时使用） */
  secondValue?: number | undefined;
}

/**
 * 总览统计卡片组件
 * 展示平台核心统计数据：产品数、设备数、告警数、消息数和API调用数
 */
const TotalList = ({ data }: { data: HomeStatistics }) => {
  // 统计卡片配置
  const statCards: StatCardItem[] = [
    {
      title: '产品数',
      value: data.productCount,
      iconName: 'icon-home-chanpinshu',
      cardClass: 'one',
    },
    {
      title: '设备数',
      value: data.deviceCount,
      iconName: 'icon-home-shebeishu',
      cardClass: 'two',
    },
    {
      title: '告警数',
      value: data.alarmCount,
      iconName: 'icon-home-gaojingshu',
      cardClass: 'three',
    },
    {
      title: '消息数',
      value: data.msgCount,
      iconName: 'icon-home-xiaoxishu',
      cardClass: 'four',
      isDouble: true,
      secondTitle: 'API调用数',
      secondValue: data.apiCount,
    },
  ];

  /**
   * 渲染单个统计卡片
   * @param card 卡片配置
   * @param index 卡片索引
   */
  const renderStatCard = (card: StatCardItem, index: number) => (
    <div key={index} className="public-card grid-col-span-1">
      <div className="flex-col">
        <div className="flex-center items-stretch">
          <div className={`index-card-icon ${card.cardClass} flex-center`}>
            <SvgIcon name={card.iconName} className="text-8" />
          </div>

          {card.isDouble ? (
            // 双列布局（消息数和API调用数）
            <div className="flex-1 flex justify-between px-[5%]">
              <div className="flex-1 flex-col">
                <span>{card.title}</span>
                <NumberTicker
                  className="num-text lh-32px text-24px font-bold text-[rgba(0,0,0,0.85)]"
                  value={card.value}
                />
              </div>
              <div className="flex-1 flex-col">
                <span>{card.secondTitle}</span>
                <NumberTicker
                  className="num-text lh-32px text-24px font-bold text-[rgba(0,0,0,0.85)]"
                  value={card.secondValue}
                />
              </div>
            </div>
          ) : (
            // 单列布局
            <div className="flex-1 flex-col p-x-[10%]">
              <span>{card.title}</span>
              <NumberTicker
                className="num-text lh-32px text-24px font-bold text-[rgba(0,0,0,0.85)]"
                value={card.value}
              />
            </div>
          )}

          <div className="flex h-full">
            <ExclamationCircleOutlined />
          </div>
        </div>

        {/* 预留：今日新增数据展示区域 */}
        {/*
        <div className="h-1px bg-#eee w-full my-2"></div>
        <div className="flex items-center">
          <span className="bg-[rgba(255,143,62,0.16)] text-center color-#FF8F3E rounded-full lh-5 h-5 w-5 text-3.5">
            今
          </span>
          <span className="text-4 color-[#7B8596] mx-2">新增</span>
          <NumberTicker
            className="num-text lh-4 text-5 font-bold text-[rgba(0,0,0,0.85)]"
            value={0}
          />
        </div>
        */}
      </div>
    </div>
  );

  return (
    <div className="grid grid-cols-4 gap-4">
      {statCards.map((card, index) => renderStatCard(card, index))}
    </div>
  );
};

export default TotalList;
